<template>
  <div>
    <div id="container" style="height: 1000px" />
  </div>
</template>

<script>
import { Promise } from 'jszip/lib/external'
export default {
  name: 'Home',
  data() {
    return {
      map: null,
      infoWindow: null
    }
  },
  created() {
    this.getMap()
  },
  methods: {
    getMap() {
      const p1 = new Promise((resolve, reject) => {
        const aMapScript = document.createElement('script')
        aMapScript.setAttribute(
          'src',
          'https://webapi.amap.com/maps?v=1.4.15&key=52a208e99a6c24ab60208167d15cb5db&plugin=AMap.MouseTool,AMap.PolyEditor'
        )
        document.head.appendChild(aMapScript)
        aMapScript.onload = function() {
          resolve(aMapScript)
        }
      })
      const p2 = new Promise((resolve, reject) => {
        const loca = document.createElement('script')
        loca.setAttribute('src', 'http://webapi.amap.com/loca?v=1.3.2&key=52a208e99a6c24ab60208167d15cb5db')
        document.head.appendChild(loca)
        loca.onload = function() {
          resolve(loca)
        }
      })
      Promise.all([p1, p2])
        .then((result) => {
          var map = new AMap.Map('container', {
            mapStyle: 'amap://styles/fa9f091b73ec8e37b8b84784a4791559', // 地图样式
            features: ['bg', 'road'],
            center: [116.397475, 39.908668],
            pitch: 0,
            zoom: 10,
            viewMode: '2D'
          })

          var layer = new Loca.HeatmapLayer({
            map: map
          })

          var list = []
          var i = -1
          const heatmapData = [{
            'lng': 116.543317,
            'lat': 39.877525,
            'count': 8
          },
          {
            'lng': 116.402726,
            'lat': 39.962996,
            'count': 9
          },
          {
            'lng': 116.533757,
            'lat': 39.916293,
            'count': 10
          },
          {
            'lng': 116.297368,
            'lat': 39.936267,
            'count': 7
          },
          {
            'lng': 116.281225,
            'lat': 39.947723,
            'count': 6
          },
          {
            'lng': 116.651846,
            'lat': 40.119239,
            'count': 1
          },
          {
            'lng': 116.399739,
            'lat': 39.960987,
            'count': 14
          },
          {
            'lng': 116.316824,
            'lat': 39.862571,
            'count': 15
          }]
          var length = heatmapData.length
          while (++i < length) {
            var item = heatmapData[i]
            list.push({
              coordinate: [item.lng, item.lat],
              count: item.count
            })
          }

          layer.setData(list, {
            lnglat: 'coordinate',
            value: 'count'
          })

          layer.setOptions({
            style: {
              radius: 16,
              color: {
                0.5: '#2c7bb6',
                0.65: '#abd9e9',
                0.7: '#ffffbf',
                0.9: '#fde468',
                1.0: '#d7191c'
              }
            }
          })

          layer.render()
        })
        .catch((error) => {
          //console.log(error)
        })
    }
  }
}
</script>

<style lang="scss"></style>
